<?php include_once("./db_config.php");?>
<!DOCTYPE>
<html lang="<?php echo $lang;?>">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
        <meta name="renderer" content="webkit">
        <meta name="description" content="向日葵">
        <meta name="keywords" content="向日葵电脑">
        <meta name="author" content="ysfl">
        <meta name="robots" content="index,follow">
        <link rel="icon" href="./img/favicon.ico">
        <title>向日葵电脑会员注册页面</title>
        <!--[if lte IE 8]>
        <style type="text/css">
            html,body{width:100%; height:100%; overflow:scroll}
            .section-btn{display:none;}
        </style>
        <![endif]-->
        <!-- Bootstrap core CSS -->
        <script src="./js/jquery.min.js"></script>
        <link href="./css/bootstrap.min.css" rel="stylesheet">
        <style type="text/css">
        .main{
            background-color: rgba(51, 51, 51, 0.45);
            width: 840px;
            height: 500px;
            border: 1px solid rgba(71, 173, 153, 0.25);
            border-radius: 10px;
            box-shadow: 0 5px 20px rgba(0, 0, 0, 0.4);
            margin: 10% auto;
        }
        .login_form{
            margin: 0 auto;
            padding: 0 0 0 0;
        }
        .login_form .input-group{
            margin-left: 30px;
        }
        .login_form .input-group{
            margin: 10px auto;
        }
        .input-group-addon{
            color: rgb(5, 139, 150);
        }
        .userinfo{
            float: right;
              margin: -60px 1px 0 0;
        }
        .logoutinfo{
            float: right;
              margin: -100px 1px 0 0;
        }
        .button-reg{
           margin: 13px 0px 63px 455px;
        }
        .button-reg a{
        }
        .reg_err{
            margin:-24px auto ;
            width: 50%;
            text-align: center;
        }
        body{
            background: url("./img/Celina.jpg")center top no-repeat;
            background-size:100% 100%;
        }
        h1{
            color:#d9edf7;
            background-color : black;
            text-shadow : rgba(255,255,255,0.5) 0 5px 6px, rgba(255,255,255,0.2) 1px 3px 3px;
            -webkit-background-clip : text;
        }
        </style>
    </head>
<body>
    <div class="main">
    <div class="page-header">
     <h1><b>向日葵电脑会员注册页面</b></h1>
     
    </div>
    <div id="login-info">
    <div class="navbar-form loginfo">
        <p class="userinfo"><a class="btn btn-danger btn-xs" href='./'>回到主页</a> <a class="btn btn-success btn-xs" href='./login.php'>登录</a></p>
     </div>
            <form class="form-horizontal login_form" role="form">
                <div class="input-group" style="width:300px;">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-user"></span></div>
                    <input type="text" placeholder="用户名" class="form-control" id="vip-reg-username">
                </div>
                <div class="input-group" style="width:300px;">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                    <input type="password" placeholder="密码" class="form-control" id="vip-reg-password">
                </div>
                <div class="input-group" style="width:300px;">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                    <input type="password" placeholder="确认密码" class="form-control" id="vip-reg-password1">
                </div>
                <div class="input-group" style="width:300px;">
                    <div class="input-group-addon"><span class="glyphicon glyphicon-lock"></span></div>
                    <input type="text" placeholder="手机号码" class="form-control" id="vip-reg-call">
                </div>
                <div class="button-reg">
                    <input type="reset" name="button" class="btn btn-primary" id="button" value="重置" />
                    <a class="btn btn-success" id="vip-reg">注册</a>
                </div>
            </form>
            <div class="alert alert-info reg_err" role="alert">请按要求填写您的信息</div>
        </div>
    </div>
</body>
<script type="text/javascript">
  $(document).ready(function(){
    /******** 注册ajax *******/

// 页面加载完成后激活用户名输入框
$("#vip-reg-username").focus();

    // 用户名焦点框提示
    $("#vip-reg-username").focus(function(){
        var name = $("#vip-reg-username").val();
            alert_Class_remove();
            $(".reg_err").addClass("alert-info");
            $(".reg_err").html("请输入账号");
    });

    // 密码焦点框提示
    $("#vip-reg-password").focus(function(){
        var pass    = $("#vip-reg-password").val();
            alert_Class_remove();
            $(".reg_err").addClass("alert-info");
            $(".reg_err").html("请输入密码");
    });

    // 确认密码焦点框提示
    $("#vip-reg-password1").focus(function(){
        var pass    = $("#vip-reg-password").val();
            alert_Class_remove();
            $(".reg_err").addClass("alert-info");
            $(".reg_err").html("请输入确认密码");
    });

    // 手机焦点框提示
    $("#vip-reg-call").focus(function(){
        var call    = $("#vip-reg-call").val();
            alert_Class_remove();
            $(".reg_err").addClass("alert-info");
            $(".reg_err").html("请输入您的手机");
    });
    
    // 用户名检测
    $("#vip-reg-username").keyup(function(){
        var name = $("#vip-reg-username").val();
        var start   = "check-username";
        if (name == "") {
            alert_Class_remove();
            $(".reg_err").addClass("alert-info");
            $(".reg_err").html("请输入账号");
        }
        else {
            $.post("./function/function.vip.reg.php",{name:name,start:start},function(data){
                if (data == 0) {
                    alert_Class_remove();
                    $(".reg_err").addClass("alert-success");
                    $(".reg_err").html("这个账号还没有人使用");
                }
                else if (data == 1) {
                    alert_Class_remove();
                    $(".reg_err").addClass("alert-danger");
                    $(".reg_err").html("这个账号已经有人在用了！");
                }
            });
        }
    })

    // 密码确认检测
    $("#vip-reg-password1").keyup(function(){
        var name = $("#vip-reg-username").val();
        var pass    = $("#vip-reg-password").val();
        var pass1    = $("#vip-reg-password1").val();
        if (pass == "") {
            alert_Class_remove();
            $(".reg_err").addClass("alert-info");
            $(".reg_err").html("请输入密码");
        }
        else if (pass1 == "") {
            alert_Class_remove();
            $(".reg_err").addClass("alert-info");
            $(".reg_err").html("请输入确认密码");
        }
        else if (pass != pass1) {
            alert_Class_remove();
            $(".reg_err").addClass("alert-danger");
            $(".reg_err").html("两次输入的密码不一致");
        }
        else {
            alert_Class_remove();
            $(".reg_err").addClass("alert-success");
            $(".reg_err").html("密码一致");
        }
    });

    $("#vip-reg").on("click",function(){
        var name = $("#vip-reg-username").val();
        var pass    = $("#vip-reg-password").val();
        var pass1    = $("#vip-reg-password1").val();
        var call    = $("#vip-reg-call").val();
        var start = "vip-reg";

        if (name == "") {
            alert_Class_remove();
            $(".reg_err").addClass("alert-danger");
            $(".reg_err").html("账号呢？ - _ -!!!");
        }
        else if (pass == "") {
            alert_Class_remove();
            $(".reg_err").addClass("alert-info");
            $(".reg_err").html("请输入密码");
        }
        else if (pass != pass1) {
            alert_Class_remove();
            $(".reg_err").addClass("alert-danger");
            $(".reg_err").html("两次输入的密码不一致");
        }
        else if (call == "") {
            alert_Class_remove();
            $(".reg_err").addClass("alert-info");
            $(".reg_err").html("请输入您的手机");
        }
        else if (name.length < 3) {
            alert_Class_remove();
            $(".reg_err").addClass("alert-danger");
            $(".reg_err").html("账户不能小于3个字符！");
        }
        else if (name.length > 18) {
            alert_Class_remove();
            $(".reg_err").addClass("alert-danger");
            $(".reg_err").html("账户不能大于18个字符！");
        }
        else if (pass.length <= 6) {
            alert_Class_remove();
            $(".reg_err").addClass("alert-danger");
            $(".reg_err").html("密码不能小于6位数！");
        }
        else if (!/^(13[0-9]|14[0-9]|15[0-9]|18[0-9])\d{8}$/i.test(call)) {
            alert_Class_remove();
            $(".reg_err").addClass("alert-danger");
            $(".reg_err").html("请输入正确的手机号码！");
        }
        else {
            $(".reg_err").addClass("alert-info");
            $(".reg_err").html("数据提交中……");
            $.post("./function/function.vip.reg.php",{
                start:start,
                name:name,
                pass:pass,
                call:call
            },function(data){
                if (data == 1) {
                    alert_Class_remove();
                    $(".reg_err").addClass("alert-success");
                    $(".reg_err").html("恭喜你，注册成功啦！马上去 <a class='btn btn-success' href='./login.php'>登录</a>");
                }
                else if (data == 0) {
                    alert_Class_remove();
                    $(".reg_err").addClass("alert-danger");
                    $(".reg_err").html("出现错误了！注册失败，请联系管理员！");
                }
                else if (data == 3) {
                    alert_Class_remove();
                    $(".reg_err").addClass("alert-danger");
                    $(".reg_err").html("账户已存在,请换一个试试吧！");
                }
            });
        }
    });
    
    /******  ajax注册end ******/
});

function alert_Class_remove(){
  $(".reg_err").removeClass("alert-success").removeClass("alert-danger").removeClass("alert-info");
}

</script>
</html>